<template>
	<view>
		<view class="topBarBox bg margin-0" style="position: fixed;margin-bottom: 200rpx;z-index: 1000;">
			<view :class="[currentListIndex==1?'topBar_active':'topBar']" @click="changeTopBar(1)">
				<text space='emsp'>全部动态</text>
			</view>
			<view :class="[currentListIndex==2?'topBar_active':'topBar']" @click="changeTopBar(2)">
				<text space='emsp'>我的关注</text>
			</view>
			<view :class="[currentListIndex==3?'topBar_active':'topBar']" @click="changeTopBar(3)">
				<text space='emsp'>我的动态</text>
			</view>
		</view>

		<uni-fab ref="fab" :pattern="pattern" horizontal="right" vertical="bottom" direction="horizontal"
			@trigger="trigger" @fabClick="fabClick" />


		<view style="margin-top: 65rpx; position: absolute;margin-bottom: 30rpx;padding-bottom: var(--window-bottom);">
			<!-- 一个完整动态 -->
			<view v-for="(moment,index) in showList" class="bg margin-bottom-lg">
				<!-- 用户信息区 -->
				<view class="flex justify-between margin-bottom padding-sm" >
					<!-- 头像 -->
					<u-image :src="moment.user.avr" width="100upx" height="100upx" mode="" @click="goUser(moment.userId)">
					</u-image>
					<view class="flex-sub margin-left text-white flex flex-direction justify-between">
						<view class="flex justify-between">
							<view>
								<!-- 昵称 -->
								<view class="margin-right-xs" style="display: inline-block;">
									<text>{{moment.user.nick}}</text>
								</view>
								<!-- 性别 -->
								<view class="round" v-if="moment.user.gender=='女'"
									style="display: inline-block;background-color: #582D4D; color: #FF659A;padding: 2upx 8upx;">
									<u-icon name="woman" color="#FF659A" size="24"></u-icon>{{moment.user.age}}
								</view>
								<view class="round" v-if="moment.user.gender=='男'"
									style="display: inline-block;background-color: #4b56f1; color: #69a5ff;padding: 2upx 8upx;">
									<u-icon name="man" color="#69a5ff" size="24"></u-icon>{{moment.user.age}}
								</view>
								<view style="position: absolute;margin-top: -40rpx;margin-left: 430rpx;">
									<u-button v-if="!moment.careMomentUser" class="nocare" @click='careUser(moment)'
										hover-class='none'>
										<uni-icons type="plusempty" size="15" color="#ffffff"></uni-icons>
										&nbsp;&nbsp;&nbsp;&nbsp;关注
									</u-button>
									<u-button v-else class="cared" @click='cancelCare(moment)' hover-class='none'>
										<uni-icons type="bars" size="20" color="#747474"></uni-icons>
										已关注
									</u-button>
								</view>
								<view class="margin-right-xs margin-top-xs uniui-color"
									style="font-size: 10rpx;color: silver;">
									{{moment.logicTime}}
								</view>

							</view>
						</view>
					</view>
				</view>
				<!-- 内容区 -->
				<view class="margin-bottom-lg padding-left-lg padding-right-lg">
					<!-- 文字 -->
					<view style="color: white;margin-bottom: 10px;" @click="getDetail(moment.id)">
						<text> {{moment.content}}</text>
					</view>
					<!-- 图片 -->
					<view style="display: flex; flex-wrap: wrap; justify-content: space-between;">
						<view v-for="(img,index) in moment.imgs">
							<u-image :src="img" style="margin:  20rpx 0rpx;" width="330upx" height="330upx" mode=""
								@click="imgPreview(moment.imgs)">
							</u-image>
						</view>
					</view>
				</view>
				<!-- 操作区 -->
				<view style="display: flex;justify-content: space-between; padding:20rpx 50rpx">
					<!-- 已点赞 -->
					<view v-if="moment.likeMoment" class="card-actions-item" @click="cancelLike(moment)"
						style="justify-content: center;display: inline;">
						<uni-icons type="heart-filled" color="#ff4a4d"></uni-icons>
						<text class="action_text">{{moment.likeNum}}</text>
					</view>
					<!-- 未点赞 -->
					<view v-else class="card-actions-item" @click="giveLike(moment)"
						style="justify-content: center;display: inline;">
						<uni-icons type="heart" color="#999"></uni-icons>
						<text class="action_text">{{moment.likeNum}}</text>
					</view>
					<view class="card-actions-item" @click="getDetail(moment.id)" style="justify-content: flex-end;;">
						<uni-icons type="chatbubble" color="#999"></uni-icons>
						<text class="action_text">{{moment.discussNum}}</text>
					</view>
					<view class="card-actions-item" @click="getDetail(moment.id)" style="justify-content: flex-start;">
						<uni-icons type="eye" color="#999"></uni-icons>
						<text class="action_text">{{moment.readNum}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				// 当前展示的动态，1 表示全部动态，2 表示我的关注
				currentListIndex: 1,
				showList: [],
				allList: [],
				myLikeList: [],
				isCare: false,
				pageNum: 1,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				// 当前登录用户的id，待完善
				loginUserId: ''
			}
		},
		onShow() {
			this.loginUserId = uni.getStorageSync('userId');
			this.getData();

		},
		// 上拉刷新
		onPullDownRefresh() {
			uni.hideLoading();
			this.pageNum == 1;
			this.getData();
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 0);
		},
		// 下拉加载更多数据
		onReachBottom() {
			this.pageNum++;
			this.getData();
		},
		methods: {
			// 查询数据，每次五条，下拉刷新，上拉加载
			getData() {
				this.$myRequest({
					url: "/community/getAllMoment",
					data: {
						pageNum: this.pageNum,
						userId: this.loginUserId
					}
				}).then(r => {
					console.log(r);
					this.allList.push(...r.data.data.data);
					this.getMyLikeList();
					this.showList = this.currentListIndex == 1 ? this.allList : this.myLikeList;
					console.log("全部动态：", this.allList);
					console.log("我的关注：", this.myLikeList);
				})
			},

			// 更改顶部标签 全部动态 我的关注
			changeTopBar(barId) {
				this.currentListIndex = barId;
				if (barId == 1) {
					this.showList = this.allList;
				} else {
					this.showList = this.myLikeList;
				}
			},
			// 根据查到的动态，筛选我关注的用户动态
			getMyLikeList() {
				this.myLikeList.length = 0;
				for (let moment of this.allList) {
					if (moment.careMomentUser) {
						this.myLikeList.push(moment);
					}
				}
				// 按时间倒序排序
				this.myLikeList = this.myLikeList.sort((m1, m2) => {
					console.log(new Date(m2.time).getTime(), new Date(m1.time).getTime());
					return new Date(m2.time).getTime() - new Date(m1.time).getTime();
				})
			},
			getDetail(id) {
				uni.navigateTo({
					url: '/pages/moment/momentDetail?id=' + id
				});
			},
			goUser(id) {
				console.log("用户详情，id：", id)
				uni.navigateTo({
					url: '/pages/index/game/user?id=' + id
				});
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			fabClick() {
				uni.navigateTo({
					url: '/pages/moment/postMoment'
				});
			},
			// 关注
			careUser(moment) {
				console.log(this.loginUserId, moment.userId);
				if (this.loginUserId == moment.userId) {
					uni.showToast({
						title: '不能关注自己',
						icon: "none"
					})
					return;
				}

				// moment.careMomentUser = true;
				this.$myRequest({
					url: '/user/careSomebody/' + this.loginUserId + '/' + moment.userId
				}).then(r => {
					if (r.data.code == 200) {
						uni.showToast({
							title: '关注成功',
							icon: "none"
						})
						for (let m of this.allList) {
							if (m.userId == moment.userId) {
								m.careMomentUser = true;
								this.myLikeList.push(m);
							}
						}
						this.getMyLikeList();
						this.showList = this.allList;
					} else {
						uni.showToast({
							title: '不能关注自己',
							icon: "none"
						})
					}
				})
			},
			// 取关
			cancelCare(moment) {
				this.$myRequest({
					url: '/user/cancelCare/' + this.loginUserId + '/' + moment.userId
				}).then(r => {
					if (r.data.code == 200) {
						uni.showToast({
							title: '取消关注成功',
							icon: "none"
						});
						for (let m of this.allList) {
							if (m.userId == moment.userId) {
								m.careMomentUser = false;
							}
						}
						this.getMyLikeList();
						if (this.currentListIndex == 2) {
							this.showList = this.myLikeList;
						}
					}
				})
			},
			// 点赞
			giveLike(moment) {
				console.log("点赞")
				moment.likeMoment = true;
				moment.likeNum++;
				this.$myRequest({
					url: '/community/giveLike/' + this.loginUserId + '/' + moment.id
				})
			},
			// 取消点赞
			cancelLike(moment) {
				console.log("消赞");
				moment.likeMoment = false;
				moment.likeNum--;
				this.$myRequest({
					url: '/community/cancelLike/' + this.loginUserId + '/' + moment.id
				})
			},
			imgPreview(imgs) {
				console.log("查看大图", imgs)
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: imgs
				})
			},
		}
	}
</script>


<style>
	.uni-card {
		background-color: aquamarine;
	}

	.topBarBox {
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
		text-align: center;
	}

	.topBar {
		width: 375rpx;
		color: white;
		font-size: 30rpx;
		padding-top: 10rpx;
		padding-bottom: 30rpx;
	}

	.topBar_active {
		color: #3c8aff;
		width: 375rpx;
		font-size: 30rpx;
		padding-top: 10rpx;
		padding-bottom: 30rpx;
	}

	.nocare {
		width: 120rpx;
		height: 50rpx;
		color: white;
		font-size: 15rpx;
		background: #ff7aad;
		border: none;
	}

	.cared {
		width: 120rpx;
		height: 50rpx;
		color: #747474;
		font-size: 15rpx;
		background: #bfbfbf;
		border: none;
	}

	button::after {
		border: none
	}

	.action_text {
		color: white;
		margin-left: 20rpx;
	}
</style>
